<script setup lang="js">
import {onMounted, ref} from 'vue'
import {ElMessage} from 'element-plus'
// 引入自定义方法
import {getCode, getCode2} from "custom"

const count = ref(0)
const intervalTime = ref()
const message = ref("我是自定义按钮2的页面")
onMounted(() => {
  intervalTime.value = setInterval(() => {
    count.value++
  })
})

const open1 = () => {
  ElMessage({
    message: 'Congrats, this is a success message.',
    type: 'success',
    plain: true,
  })
}
const open2 = () => {
  ElMessage({
    message: 'Warning, this is a warning message.',
    type: 'warning',
    plain: true,
  })
}
const open3 = () => {
  ElMessage({
    message: 'This is a message.',
    type: 'info',
    plain: true,
  })
}
const open4 = () => {
  ElMessage({
    message: 'Oops, this is a error message.',
    type: 'error',
    plain: true,
  })
}

function closeIntervalTime() {
  console.log("编码2：", getCode2());
  console.log("编码1：", getCode());
  intervalTime.value && clearInterval(intervalTime.value)
}
</script>

<template>
  <div class="main-page">
    <h2>{{ message }} ------------->> {{ count }}</h2>
    <div class="p3">
      <el-button :plain="true" @click="open1">Success</el-button>
      <el-button type="primary" :plain="true" @click="open2">Warning</el-button>
      <el-button type="success" :plain="true" @click="open3">Message</el-button>
      <el-button type="danger" :plain="true" @click="open4">Error</el-button>
      <el-button type="info" :plain="true" @click="closeIntervalTime">关闭定时器</el-button>
    </div>

  </div>
</template>

<style scoped lang="less">
.main-page {
  padding: 20px;
  width: 100%;
  height: 100%;
}
</style>